<template>
  <div class="els-collapse" role="tablist" aria-multiselectable="true">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "ElsCollapse",

  componentName: "ElsCollapse",

  props: {
    accordion: Boolean,
    value: {
      type: [Array, String, Number],
      default() {
        return [];
      },
    },
  },

  data() {
    return {
      activeNames: [].concat(this.value),
    };
  },

  provide() {
    return {
      collapse: this,
    };
  },

  watch: {
    value(value) {
      this.activeNames = [].concat(value);
    },
  },

  methods: {
    setActiveNames(activeNames) {
      activeNames = [].concat(activeNames);
      let value = this.accordion ? activeNames[0] : activeNames;
      this.activeNames = activeNames;
      this.$emit("input", value);
      this.$emit("change", value);
    },
    handleItemClick(item) {
      if (this.accordion) {
        this.setActiveNames(
          (this.activeNames[0] || this.activeNames[0] === 0) &&
            this.activeNames[0] === item.name
            ? ""
            : item.name
        );
      } else {
        let activeNames = this.activeNames.slice(0);
        let index = activeNames.indexOf(item.name);

        if (index > -1) {
          activeNames.splice(index, 1);
        } else {
          activeNames.push(item.name);
        }
        this.setActiveNames(activeNames);
      }
    },
  },

  created() {
    this.$on("item-click", this.handleItemClick);
  },
};
</script>
<style scoped>
.els-collapse-transition {
  -webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out,
    0.3s padding-bottom ease-in-out;
  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out,
    0.3s padding-bottom ease-in-out;
}
.horizontal-els-collapse-transition {
  -webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out,
    0.3s padding-right ease-in-out;
  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out,
    0.3s padding-right ease-in-out;
}
/* .el-opacity-transition { */
/*   -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); */
/*   transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); */
/* } */
.els-collapse {
  height: 100%;
  /* border-top: 1px solid #ebeef5; */
  /* border-bottom: 1px solid #ebeef5; */
}
</style>
